<template>
	<div>
		<div class="mark" v-if="bool">
			<div class="alert">
				<!-- 内容 -->
				<div class="cont">
					<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
						<a-form-item label="名称">
							<a-input v-model:value="formState.name" />
						</a-form-item>
						<a-form-item label="描述">
							<a-input v-model:value="formState.desc" />
						</a-form-item>
						<a-form-item label="是否显示">
							<a-select v-model:value="formState.status">
								<a-select-option value="1">显示</a-select-option>
								<a-select-option value="0">不显示</a-select-option>
							</a-select>
						</a-form-item>
					</a-form>
				</div>
				<!-- 按钮 -->
				<div class="btns">
					<a-button @click="addSure">确定</a-button>
					<a-button @click="cancel">取消</a-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import upLoadImg from '../../../components/upImage.vue'

	export default {
		components: {
			upLoadImg
		},
		data() {
			return {
				/*传递图片地址*/
				imgUrl: [],
				bool: false,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 10
				},
				formState: {
					name: '',
					desc: '',
					status: '',
				}
			}
		},
		mounted() {},
		methods: {
			sures() {
				this.bool = true;
				this.formState = {
					name: '',
					desc: '',
					status: '1',
				}
			},
			suresTwo(e) {
				this.bool = true;
				this.formState = e;
				this.formState.status = String(this.formState.status)
			},
			addSure() {
				this.$emit("addAdverst", this.formState)
				this.bool = false
			},
			cancel() {
				this.bool = false
			},
			imageUrl(e) {
				this.formState.image = e.imUrl
			},
		}
	}
</script>

<style scoped>
	.mark {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.alert {
		background: #fff;
		width: 600px;
	}

	.cont {
		display: flex;
		height: 400px;
	}

	.btns {
		height: 60px;
		background-color: #2CAEFF;
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.ant-btn,
	.ant-btn:active,
	.ant-btn:focus {
		margin-left: 30px;
		margin-right: 10px;
	}

	.ant-form {
		box-sizing: border-box;
		/* margin: 37px; */
		margin-top: 50px;
		padding: 0;
		color: rgba(0, 0, 0, 0.85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		font-feature-settings: 'tnum';
		width: 100%;
	}

	.upImg[data-v-7fdc8d5f] {
		width: 814px;
		margin-left: -75px;
	}

	:deep(.ant-form-item) {
		margin-bottom: 15px !important;
	}
</style>